<template>
  <div class="rank-progress">
    <p>{{ rankTitle }}</p>
    <div style="display: inline-block; margin-left: 20px" v-if="barData.length === 0">
      暂无数据
    </div>
    <div v-for="(item, index) in barData" :key="index" class="progressBar">
      <div class="itemName" :title="item.name">{{ item.name }}</div>
      <div class="itemData">
        <template>
          <span
            :style="
              'width:' +
                (item.num / barMaxWidth) * 200 +
                'px; background:linear-gradient(to right,' +
                barColor[index] +
                ',' +
                barColorRight[index] +
                ');'
            "
          ></span>
        </template>
        <p class="numDiv">{{ item.num }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RankProgress",
  props: {
    rankTitle: {
      type: String,
      default: function() {
        return "设备名称";
      }
    },
    barData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    barColor: {
      type: Array,
      default: function() {
        return ["#FF89A5", "#FBE191", "#87DFFF", "#87DFFF"];
      }
    },
    barColorRight: {
      type: Array,
      default: function() {
        return ["#FC5A69", "#FC7A7A", "#2EB0FC", "#2EB0FC"];
      }
    }
  },
  computed: {
    barMaxWidth() {
      return Math.max(...this.barData.map(e => e.num));
    } //100
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.rank-progress {
  p {
  display: inline-block;
    font-size: 15px;
    font-weight: 600;
  }
  .progressBar {
    margin-top: 10px;
    .itemName {
      float: left;
      font-size: 13px;
      color: #666666;
      width: 30%;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .itemData {
      position: relative;
      span {
        display: inline-block;
        height: 11px;
        width: 0;
        max-width: 60%;
        transition: all 500ms;
        border-radius: 0 5px 5px 0;
      }
      .numDiv {
        float: right;
        width: 7%;
        font-size: 13px;
        color: #666666;
        font-weight: 500;
      }
    }
  }
}
</style>
